<template>
  <div>
    <Row>
      <Col :span="24">
        <Jdd-Card :padding="12">
          <div style="font-size:16px;color:#515A6E;">高级详情页</div>
          <p
            style="margin-top:12px;"
          >详情页主要是为用户展示详细的信息。高级详情页是panel组件与table、tab、form等组件的组合，达到展示多元化多复合信息结构的目的。</p>
        </Jdd-Card>
      </Col>
    </Row>
    <Row :gutter="12" style="margin-top:16px;display:flex;">
      <Col :xs="24" :sm="24" :md="12" :lg="4">
        <Card dis-hover style="height:100%;">
          <Jdd-WaterWave v-model="waterData" :countUp="'water2'"></Jdd-WaterWave>
          <div style="text-align: center;margin-top: 8px;">健康度</div>
        </Card>
      </Col>
      <Col :xs="24" :sm="24" :md="24" :lg="16">
        <Row :gutter="8">
          <Col :span="6"  v-for="item in cardData" :key="item.id">
            <Jdd-Card :padding="12">
              <div
                :style="'display: flex;justify-content: space-between;align-items: center;color:'+item.color"
              >
                <h4>{{`${item.title}:${item.count}${item.unit}`}}</h4>
                <Jdd-Icon :type="item.icon" size="14" :color="item.color" />
              </div>
            </Jdd-Card>
          </Col>
        </Row>
        <Row style="margin-top:12px;">
          <Col :span="24">
            <Jdd-Card :padding="12">
              <JddTextArea
                :data="detailInfo"
                :columnCount="3"
                :maxHeight="3"
                i18nKey="detail.senior.detailInfo"
              />
            </Jdd-Card>
          </Col>
        </Row>
      </Col>

      <Col :xs="24" :sm="24" :md="12" :lg="4">
        <div style="height:100%;">
          <Row>
            <Col :span="24">
              <Jdd-Card :padding="12">IN:100M / OUT:100M</Jdd-Card>
            </Col>
          </Row>
          <Row style="margin-top:12px;">
            <Col :span="24">
              <Jdd-Card :padding="12" style="height:116px;">
                <Row>
                  <Col
                    :span="12"
                    v-for="item in operateList"
                    :key="item.id"
                    style="text-align:center;"
                  >
                    <Jdd-BtnDefault
                      style="min-width:78px;padding:0px 10px;margin:7px 0px;"
                      @click="operateClick(item)"
                    >{{item.text}}</Jdd-BtnDefault>
                  </Col>
                </Row>
              </Jdd-Card>
            </Col>
          </Row>
        </div>
      </Col>
    </Row>
    <Row style="margin-top:10px;">
      <Jdd-EventTable
        v-bind="eventTable"
        :eventTypes="['ALARM', 'CHANGE']"
        :eventTypeActives="['ALARM', 'CHANGE']"
        :levelFlags="['NORMAL', 'ROOT', 'CHILD']"
        :levelFlagActives="['NORMAL', 'ROOT', 'CHILD']"
        :messageLevels="['EMERGENCY', 'CRITICAL', 'WARNING', 'NOTIFICATION', 'DEBUGGING']"
        :messageLevelActives="['EMERGENCY', 'CRITICAL', 'WARNING', 'NOTIFICATION', 'DEBUGGING']"
        :status="['RESERVED', 'ACTIVE', 'PROCESSING', 'COMPLETED']"
        :statusActives="['RESERVED', 'ACTIVE', 'PROCESSING']"
        :appNamesShow="true"
        :alarmAppNameShow="true"
        :ipShow="true"
      ></Jdd-EventTable>
    </Row>
    <Row style="margin-top:24px;">
      <Col :span="24">
        <Row>
          <Col :span="12">
            <div style="display:flex;align-items:center;">
              <Jdd-Icon type="icon-chart" style="margin-right:8px" :size="16" />
              <span style="font-size:16px;color: #515A6E;">告警趋势图</span>
            </div>
          </Col>
          <Col :span="12" style="text-align:right;">
           <Jdd-SwitchText v-model="isOpen" size="small" :text="['柱状图','折线图']"  @on-change="handleChangeChartType"></Jdd-SwitchText>
            <!-- <JddSwitch
              v-model="isOpen"
              :size="'small'"
              @on-change="handleChangeChartType"
              :rightText="'折线图'"
              :leftText="'柱状图'"
              type="extend"
            /> -->
          </Col>
        </Row>
        <Row style="margin-top:12px;">
          <Col>
            <Jdd-Charts
              ref="myChartsBar"
              v-show="!isOpen"
              type="bar"
              url="/detail/chart?type=bar"
              :interval="0"
              :refurbishMode="'cover'"
              :width="'100%'"
              :height="'300px'"
              :autoLoad="false"
            ></Jdd-Charts>
            <Jdd-Charts
              v-show="isOpen"
              ref="myChartsLine"
              type="line"
              url="/detail/chart?type=line"
              :interval="0"
              :refurbishMode="'cover'"
              :width="'100%'"
              :height="'300px'"
              :autoLoad="false"
            ></Jdd-Charts>
          </Col>
        </Row>
      </Col>
    </Row>
    <Row style="margin-top:24px;">
      <Col>
        <Tabs value="name2" type="card">
          <TabPane label="Tab1" name="name1">标签一的内容</TabPane>
          <TabPane label="Tab2" name="name2">
            <Jdd-Card border="none" :padding="8" style="padding:8px 16px;">
              <JddTextArea
                :data="tabDataInfo"
                :columnCount="3"
                :maxHeight="3"
                i18nKey="detail.senior.tabDataInfo"
              />

              <Divider />
              <Jdd-TablePage ref="tabTable" v-bind="tableData">
                <Row>
                  <Col :xs="24" :sm="24" :md="18" :lg="18">
                    <Jdd-BtnDefault
                      @click="handleDownClick"
                    >{{ $t("detail.senior.tab.btnNodeDown")}}</Jdd-BtnDefault>
                    <Jdd-BtnDefault
                      @click="handleCapacityClick"
                    >{{ $t("detail.senior.tab.batchCapacity")}}</Jdd-BtnDefault>
                  </Col>

                </Row>
                <template slot="action" slot-scope="props">
                  <Jdd-BtnDefault
                    icon="icon-details"
                    :title="$t('detail.senior.tab.iconDetail')"
                    size="18"
                    color="#000"
                    @click="handleShowDetailClick(props.row)"
                  ></Jdd-BtnDefault>
                  <Jdd-Icon
                    type="icon-assetsInfo"
                    color="#000"
                    :title="$t('detail.senior.tab.iconRedis')"
                    size="18"
                    style="cursor: pointer;"
                    @click="handleRedisClick(props.row)"
                  />
                  <Jdd-Icon
                    type="icon-charts"
                    color="#000"
                    :title="$t('detail.senior.tab.iconChart')"
                    size="18"
                    style="cursor: pointer;"
                    @click="handleChartClick(props.row)"
                  />
                  <Dropdown>
                    <Jdd-BtnDefault
                      type="info"
                      icon="icon-openMore"
                      :title="$t('detail.senior.tab.iconMore')"
                    ></Jdd-BtnDefault>
                    <DropdownMenu slot="list">
                      <DropdownItem>
                        <div style="text-align:left;" @click="handleHistoryClick(props.row)">
                          <Jdd-Icon
                            type="icon-historySearch"
                            color="#000"
                            :title="$t('detail.senior.tab.iconHistory')"
                            size="16"
                            style="cursor: pointer;margin-right:8px;"
                          />
                          <span>{{$t('detail.senior.tab.iconHistory')}}</span>
                        </div>
                      </DropdownItem>
                      <DropdownItem>
                        <div style="text-align:left;" @click="handleEditClick(props.row)">
                          <Jdd-Icon
                            type="icon-notification"
                            color="#000"
                            :title="$t('detail.senior.tab.iconEdit')"
                            size="16"
                            style="cursor: pointer;margin-right:8px;"
                          />
                          <span>{{$t('detail.senior.tab.iconEdit')}}</span>
                        </div>
                      </DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                </template>
              </Jdd-TablePage>
            </Jdd-Card>
          </TabPane>
          <TabPane label="Tab3" name="name3">标签三的内容</TabPane>
        </Tabs>
      </Col>
    </Row>
  </div>
</template>
<script>
import detailInfo from './index.js'
export default detailInfo
</script>
<style >
.ivu-tabs-bar {
  margin-bottom: 0px !important;
}
</style>
